<template>
  <div class="body">
    <!-- <div class="app-container"> -->
      <div class="person">
        <div class="headIcon" :style="{background: 'url( '+photo + ')'}" @click="upload">
          <!--<a class="ui-upload">-->
          <!-- <input type="file" ref="imgInput" id="fileUp" class="fileUp" accept="image/png, image/jpeg" @change="upload"> -->
          <!--</a>-->
        </div>
        <div class="name">
          <span @click="toUserInfo">{{name}}</span>
        </div>
        <div class="discovery">
          <router-link to="/">
          <div class="active">
            <p>
              發現活動〉
            </p>
          </div>
          </router-link>
        </div>
      </div>
      <div class="weyouth">
        <div class="backRed">
          <div class="WeYouthFont">
            WeYouth個人會員特權
            <router-link to="/person_membership">
              <span>去了解 〉</span>
            </router-link>
          </div>
          <div class="WeYouthFont2">
            WeYouth協會會員特權
            <router-link to="/membership">
              <span>去了解 〉</span>
            </router-link>
          </div>
        </div>
      </div>
      <div class="more_active">
        <div class="more_active_list">
          <router-link to="/assn_list#manager">
          <div class="more_active_nva">
              <div class="more_active_assn active1"></div>
              <span>管理社團</span>
          </div>
          </router-link>
          <router-link to="/assn_list#activity">
          <div class="more_active_nva distance">
              <div class="more_active_assn active2"></div>
              <span>管理活動</span>
          </div>
          </router-link>
          <router-link to="/assn_list#email">
          <div class="more_active_nva distance">
              <div class="more_active_assn active3"></div>
              <span>郵件群發</span>
          </div>
          </router-link>
          <router-link to="/assn_list#sms">
          <div class="more_active_nva distance">
              <div class="more_active_assn active4"></div>
              <span>短信群發</span>
          </div>
          </router-link>
        </div>
      </div>
      <div class="member">
        <font>我的社團</font>
      </div>
      <div class="colllege">
        <div class="list" v-for="(key,index) in societyList" :key="index" @click="jump(key.sid)">
          <div class="leftIcon" :style="{background: 'url(https://weyouth.vip'+ key.photo + ')'}"></div>
          <div class="purple">{{key.name}}</div>
          <div class="onePurple">
            {{key.count}}位成员
            <span class="mopic"></span>
          </div>
        </div>
      </div>
      <div class="my">
        <div class="my_assn">
          <div class="signUp">已報名的活動</div>
        </div>
      </div>
      <div class="news boxShadow">
        <div class="todeList" v-for="(li,index) in activityList" :key="index" @click="details(li.aid)">
          <div class="small">
            <div class="leftPic" :style="{background: 'url(https://weyouth.vip'+ li.photo + ')'}"></div>
          </div>
          <div class="rightFont">
            <div class="title fontWeight">{{li.title}}</div>
            <div class="title lineHeight colorGrey">
              <span>{{li.society}}</span>
              <a class="last colorGrey">剩余席位{{li.limit}}</a>
            </div>
            <div class="title colorGrey">
              <span class="backGrey">{{li.start_time|formatDate}}</span>
              <span class="backGrey">{{li.type}}</span>
              <span class="backGrey">{{li.cost}}</span>
            </div>
            <div class="title position">
              <span class="maplog"></span>
              {{li.address}}
            </div>
          </div>
        </div>
      </div>
      <div class="my2">
        <div class="my_assn">
          <div class="signUp">會員優惠商家</div>
        </div>
      </div>
      <div class="total">
        <div class="total_four">
          <div class="total_four1">全部</div>
          <div class="total_four1 bacColor">飲食</div>
          <div class="total_four1 bacColor">零售</div>
          <div class="total_four1 bacColor">娛樂</div>
        </div>
      </div>
    <!-- </div> -->

    <div class="news boxShadow" id="inner">
      <!-- <scroller class="scroller" :on-infinite="infinite"
       ref='myscroller'
      > -->
        <div class="todeList" v-for="(key,index) in store" :key="index">
          <div class="small3">
            <div class="leftPic3" :style="{background: 'url(https://weyouth.vip'+ key.photo + ')'}"></div>
          </div>
          <div class="rightFont">
            <div class="title fontWeight">{{key.name}}</div>
            <div class="title lineHeight colorGrey">{{key.address}}</div>
            <div class="title colorGrey">
              <span class="backGrey discount">{{key.discount}}</span>
            </div>
            <div class="title position">
              <span class="tel">TEL:{{key.phone}}</span>
              <div class="cricle1" @click="toPhone(key.phone)"></div>
              <div class="cricle2" @click="toWebsite(key.website)"></div>
            </div>
          </div>
        </div>
        <!-- </scroller> -->
    </div>

  </div>
</template>

<script>
import { getInfo, isBind } from '@/api/login'
import { getStore } from '@/api/society'
// import axios from 'axios'
export default {
  name: 'MemberCenter',
  data () {
    return {
      sid: this.$route.query.sid,
      photo: '',
      name: '',
      activityList: [],
      store: [],
      societyList: [],
      page: 1,
      lastPage: 1,
      busy: false
    }
  },
  filters: {
    formatDate: function (value) {
      return value.slice(5, 10).replace('-', '月') + '日'
    }
  },
  created () {
    this.loadList()
    this.loadStore(this.page)
  },
  methods: {
    upload () {
      this.$router.push('/change_pic')
    },
    // infinite () {
    //   this.page += 1
    //   var self = this
    //   setTimeout(function () {
    //     self.loadStore(self.page)
    //     self.$refs.myscroller.finishInfinite(true)
    //     console.log(self.$refs.myscroller)
    //   }, 1500)
    // },
    // refresh () {
    //   var self = this
    //   setTimeout(() => {
    //     self.$refs.myscroller.finishPullToRefresh()
    //   }, 1500)
    // },
    toUserInfo () {
      this.$router.push('/user_info')
    },
    loadList () {
      getInfo().then(res => {
        if (res.code === 1) {
          this.wxBind(res.data.uid)
          localStorage.setItem('uid', res.data.uid)
          this.name = res.data.name
          this.activityList = res.data.activityList
          this.societyList = res.data.societyList
          this.photo = res.data.photo
          if (!this.name) {
            this.name = '请完善资料'
          }
          if (!this.photo) {
            this.photo = '/public/upload/image/1548151211-c81e728d9d4c2f636f067f89cc14862c.png'
          }
        } else {
          alert('请先登录')
          this.$router.push('/login')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    loadStore (page) {
      getStore({page: page}).then(res => {
        this.store = this.store.concat(res.data.data)
      }).catch(err => {
        console.log(err)
      })
    },
    wxBind (uid) {
      isBind({uid: uid}).then(res => {
        if (res.code !== 1) {
          this.$router.push('/wx_bind')
        }
      }).catch(err => { console.log(err) })
    },
    jump (sid) {
      this.$router.push('/assn_details?sid=' + sid)
    },
    details (aid) {
      this.$router.push('/activity_details?aid=' + aid)
    },
    toPhone (row) {
      console.log(row)
      window.location.href = 'tel:' + row
    },
    toWebsite (row) {
      console.log(row)
      window.location.href = row
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  background: #fff;
  font-family: PingFang SC;
}
.app-container {
  position: relative;
}
.topbar {
  width: 100%;
  height: 44px;
  background: white;
}
#inner {
  /* height:auto; */
  /* overflow-y: auto; */
}
.close {
  width: 15%;
  height: 100%;
  float: left;
  background-image: url(../style/img/close.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 30%;
}

.center {
  width: 70%;
  height: 100%;
  float: left;
  line-height: 54px;
  font-size: 17px;
  text-align: center;
  color: #000000;
  font-weight: 600;
}

.more {
  width: 15%;
  height: 100%;
  float: right;
  background-image: url(../style/img/more.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 30%;
}

.person {
  width: 100%;
  height: 68px;
  background: white;
}

.headIcon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  float: left;
  background-repeat: no-repeat !important;
  margin-top: 10px;
  margin-left: 16px;
  background-size: cover !important;
}

.name {
  width: 50%;
  height: 100%;
  float: left;
  line-height: 68px;
  margin-left: 8px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(22, 22, 22, 1);
}

.discovery {
  width: 30%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  padding-left: 3px;
  height: 24px;
  background: rgba(250, 249, 247, 1);
  width: 80px;
  line-height: 24px;
  color: #595959;
  text-align: center;
  float: right;
  border-radius: 14px;
  font-size: 15px;
}

.weyouth {
  width: 100%;
  height: 130px;
  background: white;
  margin-top: 10px;
}

.backRed {
  width: 91.73%;
  margin-left: 4.27%;
  height: 145px;
  border-radius: 10px;
  background: url(../style/img/12.png);
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: 50% 45%;
}

.active p {
  width: 90px;
  height: inherit;
}

.my {
  width: 100%;
  height: 44px;
}

.my2 {
  width: 100%;
  height: 44px;
}

.my_assn {
  width: 91.73%;
  height: 43px;
  margin-left: 4.27%;
}

.my_assn_name {
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  line-height: 46px;
  color: rgba(22, 22, 22, 1);
  display: inline;
}

.my_assn_sum {
  display: inline;
  float: right;
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  line-height: 46px;
  color: grey;
}

.more_active {
  height: 112px;
  width: 100%;
  background: white;
}

.more_active_list {
  width: 86.66%;
  margin-left: 6.67%;
  border: solid 1px white;
  height: 100%;
}

.more_active_assn {
  display: inherit;
  width: 44px;
  height: 44px;
  margin-top: 23px;
  background-size: cover !important;
}

.more_active_nva {
  float: left;
  margin-left: 1%;
}

.more_active_nva span {
  width: 44px;
  height: 16px;
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 28px;
  color: rgba(119, 119, 119, 1);
  padding-left: 3px;
}
@media only screen and (max-width:375px) {
  .distance {
    margin-left: 10%;
  }
}
@media only screen and (min-width:376px) {
  .distance {
    margin-left: 13%;
  }
}

.more_active_assn.active1 {
  background: url(../style/img/assn_1.png);
  margin-left: 4px;
}

.more_active_assn.active2 {
  background: url(../style/img/assn_2.png);
  margin-left: 4px;
}

.more_active_assn.active3 {
  background: url(../style/img/assn_3.png);
}

.more_active_assn.active4 {
  background: url(../style/img/assn_4.png);
}

.signUp {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(119, 119, 119, 1);
  line-height: 44px;
}

.news {
  width: 91.7%;
  margin-left: 3%;
  border-radius: 0 0 10px 10px;
}

.todeList {
  height: 160px;
  border-bottom: solid 1px #eceef0;
  background: white;
}

.small {
  width: 30%;
  height: 78%;
  margin: 4% 5% 0 5%;
  float: left;
  border-radius: 5px;
  background: rgba(240, 128, 128, 0.6);
}

.small3 {
  width: 30%;
  height: 78%;
  margin: 4% 5% 0 5%;
  float: left;
  border-radius: 5px;
}

.leftPic {
  width: 108%;
  height: 96%;
  float: left;
  border-radius: 5px;
  background-size: cover !important;
  background-repeat: no-repeat;
  margin-left: -4%;
}

.leftPic3 {
  width: 108%;
  height: 96%;
  float: left;
  border-radius: 5px;
  background-size: cover !important;
  margin-left: -4%;
}

.rightFont {
  width: 60%;
  height: 80%;
  margin-top: 5%;
  float: left;
}

.title {
  width: 100%;
  min-height: 23%;
  font-size: 12px;
  line-height: 20px;
}

.fontWeight {
  font-size: 18px;
}

.colorGrey {
  color: grey;
}

.lineHeight {
  line-height: 30px;
}

.backGrey {
  padding: 2px;
  border-radius: 3px;
  background: rgb(250, 249, 247);
}

.position {
  color: rgb(204, 204, 204);
}

.discount {
  background: rgba(255, 169, 103, 1);
  color: white;
}

.total {
  width: 94%;
  margin-left: 3%;
  height: 72px;
  background: white;
}

.total_four {
  width: 94%;
  height: 80%;
  margin-left: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px rgba(245, 245, 245, 1);
}

.total_four1 {
  width: 72px;
  height: 24px;
  background: rgb(249, 119, 130);
  background: linear-gradient(
    166deg,
    rgba(255, 202, 134, 1) 0%,
    rgba(255, 91, 134, 1) 100%
  );
  opacity: 1;
  border-radius: 58px;
  float: left;
  margin-left: 8px;
  text-align: center;
  line-height: 24px;
  color: white;
  font-size: 15px;
}

.bacColor {
  background: rgba(242, 241, 239, 1) !important;
  color: rgba(160, 160, 160, 1) !important;
}

.cricle1 {
  width: 24px;
  height: 24px;
  background: url(../style/img/call.png);
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 50%;
  opacity: 1;
  float: left;
  background-size: cover;
  margin-top: -5px;
}

.cricle2 {
  width: 24px;
  height: 24px;
  background: url(../style/img/website.png);
  background-size: cover;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 50%;
  opacity: 1;
  float: left;
  margin-left: 4px;
  margin-top: -5px;
}

.tel {
  float: left;
  margin-right: 10px;
}

.WeYouthFont {
  font-size: 18px;
  font-weight: 600;
  line-height: 80px;
  color: rgba(255, 245, 247, 1);
  padding-left: 20px;
  text-shadow: 0px 5px 6px rgba(229, 44, 88, 0.4);
}

.WeYouthFont2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(255, 245, 247, 1);
  padding-left: 20px;
  text-shadow: 0px 5px 6px rgba(229, 44, 88, 0.4);
}

.WeYouthFont span {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: rgba(255, 226, 156, 1);
  text-shadow: 0px 5px 6px rgba(229, 44, 88, 0.4);
  margin-left: 15%;
}

.WeYouthFont2 span {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: rgba(255, 226, 156, 1);
  text-shadow: 0px 5px 6px rgba(229, 44, 88, 0.4);
  margin-left: 15%;
}

.maplog {
  float: left;
  height: 10px;
  margin: 5px 3px 0 3px;
  width: 8px;
  background-image: url(../style/img/maplog.png);
  background-size: 100% 100%;
}

.member {
  height: 44px;
  line-height: 44px;
  font-size: 17px;
  color: grey;
  background: white;
  padding-left: 18px;
  padding-right: 18px;
}

.morepic {
  margin: 17px 5px 0 3px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.rightMore {
  float: right;
  font-size: 15px;
  color: rgb(204, 204, 204);
}

.colllege {
  min-height: 74px;
  width: 96%;
  margin-left: 2%;
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.1);
}

.boxShadow {
  margin: auto;
  width: 91.7%;
}

.list {
  margin: auto;
  border-bottom: solid 1px #eceef0;
  height: 74px;
  background: white;
  line-height: 65px;
}

.leftIcon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin: 20px 0 0 15px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  float: left;
  background-position: center !important;
}

.purple {
  font-size: 19px;
  float: left;
  line-height: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  padding-left: 10px;
}

.onePurple {
  line-height: 74px;
  float: right;
  font-size: 14px;
  color: grey;
}

.mopic {
  margin: 33px 17px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.ui-upload {
  font-size: 13px;
  width: 80px;
  height: 30px;
  position: relative;
  color: grey;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  top: 50px;
}

.ui-upload input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
  margin-left: 12px;
  height: 21px;
  width: 100%;
}
.fileUp {
  width: 100%;
  height: 100%;
  opacity: 0; /*css属性——opcity不透明度，取值0-1*/
}
</style>
